<template>
  <li class="unit-li">
    <div
      @click="($event) => toggle()"
      :class="[
        'title',
        {
          'grade-1': grade === 1,
          'grade-2': grade === 2,
          'grade-3': grade === 3,
          dark: isDark,
          light: !isDark,
          selected: isSelected
        }
      ]"
    >
      <span class="title-text">{{ datas.title }}</span>
      <span v-if="datas.children" class="arrow-icon">
        <jc-icon v-if="openTab" name="arrow-single-down" />
        <jc-icon v-else name="arrow-single-right" />
      </span>
    </div>
    <ul ref="ulRef" v-if="datas.children" class="sub-list" :style="initInlineStyle()">
      <!-- 递归调用手风琴单元组件以实现手风琴子菜单 -->
      <ArrordingUnit
        v-for="(child, index) in datas.children"
        :key="index"
        :datas="child"
        :grade="(grade as number)+1"
        :isDark="isDark"
      />
    </ul>
  </li>
</template>

<script lang="ts">
export default {
  name: 'ArrordingUnit'
}
</script>

<script lang="ts" setup>
import { verticalSlideToggle } from '@jcstdio/jc-utils/animate'
import { onMounted, ref, getCurrentInstance } from 'vue'
import type { AccordingUnit } from './types'
import type { ComponentInternalInstance } from 'vue'

const props = withDefaults(
  defineProps<{
    datas: AccordingUnit
    grade?: number
    isOpen?: boolean
    isDark?: boolean
  }>(),
  {
    grade: 1, // 若不指定，默认为一级目录
    isOpen: false,
    isDark: false
  }
)

const initInlineStyle = () => {
  if (props.isOpen === true) {
    return ''
  } else {
    return `height: 0px; overflow: hidden;`
  }
}

const that = getCurrentInstance() as ComponentInternalInstance
const grade = ref<number | undefined>(props.grade)

let toggle: () => any
const openTab = ref(props.isOpen)
const isSelected = ref(false)

onMounted(() => {
  const ulRef = that.refs.ulRef as HTMLElement
  toggle = () => {
    openTab.value = !verticalSlideToggle(ulRef)
    isSelected.value = true
    return openTab
  }
})
</script>

<style lang="scss" scoped>
.unit-li {
  user-select: none;
  list-style: none;
  /* padding-left:6px; */
  .title {
    width: 100%;
    height: 24px;
    white-space: nowrap;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    &.dark {
      color: rgb(214, 214, 214);
      &.selected {
        background-color: #04395e !important;
        border: 1px solid #007fd4 !important;
      }
      /* &:active {
        background-color: #04395E !important;
        border: 1px solid #007FD4 !important;
      } */
      &:hover {
        background-color: #55595a;
      }
    }
    &.light {
      color: #242424;
      &.selected {
        background-color: #e4e6f1 !important;
      }
      &:hover {
        background-color: #f2f2f2;
      }
    }
    &.grade-1 {
      font-size: 15px;
      /* font-weight: 600; */
    }
    &.grade-2 {
      font-size: 15px;
      /* font-weight: 600; */
    }
    &.grade-3 {
      font-size: 15px;
    }
    .title-text {
      white-space: nowrap;
    }
    .arrow-icon {
      font-size: 12px;
      padding: 2px;
    }
  }
  .sub-list {
    li.unit-li {
      padding-left: 16px;
    }
  }
}
</style>
